<template>
  <section @click="clickCurrent('current')">
    <div v-if="custormItemData.params.pattern==1">
        <div :class="['custorm--modelbox', 'graphicpagetop-show', (custormCurrent == -2)?'drag active':'drag']">
        <div
          class="phone-top img-center"
          v-bind:style="{'background-image':`url(${getPath('phone-top-'+(custormItemData.style.texttype==1?'black':'white')+'.png')})`,
          'background-color':custormItemData.style.bgcolor,'color':(custormItemData.style.texttype == 1?'#000':'#fff')}">
          <span>{{custormItemData.params.title}}</span>
        </div>
      </div>
    </div>
    <div v-if="custormItemData.params.pattern==2">
        <!-- <div :class="['custorm--modelbox', 'graphicpagetop-show', (custormCurrent == -2)?'drag active':'drag']">
        <div
          class="phone-top img-center"
          v-bind:style="{'background-image':`url(${getPath('phone-top-'+(custormItemData.style.texttype==1?'black':'white')+'.png')})`,
          'background-color':custormItemData.style.bgcolor,'color':(custormItemData.style.texttype == 1?'#000':'#fff')}">
          <span>{{custormItemData.params.title}}</span>
        </div>
      </div> -->
       <div :class="['custorm--modelbox', 'graphicpagetop-show', (custormCurrent == -2)?'drag active':'drag']">
        <div
            class="phone-top img-center"
            v-bind:style="{'background-image':`url(${getPath('phone-top-'+(custormItemData.style.texttype==1?'black':'white')+'.png')})`,
            'background-color':custormItemData.style.bgcolor,'color':(custormItemData.style.texttype == 1?'#000':'#fff')}">
            <div style="display:flex; align-items:center;margin-left:15px;">
                <div class="title">{{custormItemData.params.title}}</div>
                      <!-- <i class="el-icon-search ivu-icon" v-bind:style="{'color':custormItemData.style.textcolor}"></i> -->
                <div class="search" style="margin-left:10px;">
                 <div style="display:flex;align-items:center;">
                    <i class="el-icon-search ivu-icon" style="margin-left:15px;"></i>
                   <div style="margin-left:10px;color:#999999;" >搜索好物</div>
                 </div>
                </div>
            </div>
          </div>
          <div v-if="custormItemData.params.classtype==1">
              <div class="classtype" :style="{'background-color':custormItemData.style.bgcolor}">
                  <span style="padding:10px;font-size:24px" >推荐</span>
                  <span style="padding:10px;">美食</span>
                  <span style="padding:10px;">商圈</span>
                  <span style="padding:10px;">丽人</span>
                  <span style="padding:10px;">亲子</span>
                  <span style="padding:10px;">旅行</span>
                  <span style="padding:10px;">汽车</span>
              </div>
          </div>
       </div>
    </div>
    <div v-if="custormItemData.params.pattern==3">
       <div :class="['custorm--modelbox', 'graphicpagetop-show', (custormCurrent == -2)?'drag active':'drag']">
         <!-- <div :class="['custorm--modelbox', 'graphicswiper-show', (custormCurrent == custormIndex)?'drag active':'drag']"> -->
        <div class="phone-top img-center" style="position:absolute;top: 0;opacity:0.5;z-index:100;">
            <div style="display:flex; align-items:center;margin-left:15px;">
                <div class="title">{{custormItemData.params.title}}</div>
                      <!-- <i class="el-icon-search ivu-icon" v-bind:style="{'color':custormItemData.style.textcolor}"></i> -->
                <div class="search" style="margin-left:10px;">
                 <div style="display:flex;align-items:center;">
                    <i class="el-icon-search ivu-icon" style="margin-left:15px;"></i>
                   <div style="margin-left:10px;color:#999999;" >搜索好物</div>
                 </div>
                </div>
            </div>
          </div>
          <div style="position:absolute;top: 60px;opacity:0.5;z-index:100" v-if="custormItemData.params.shownavigation==1">
              <!-- <div class="classtype" :style="{'background-color':custormItemData.style.bgcolor}"> -->
              <div class="classtype">
                  <span style="padding:10px;font-size:24px;">推荐</span>
                  <span style="padding:10px;">美食</span>
                  <span style="padding:10px;">商圈</span>
                  <span style="padding:10px;">丽人</span>
                  <span style="padding:10px;">亲子</span>
                  <span style="padding:10px;">旅行</span>
                  <span style="padding:10px;">汽车</span>
              </div>
          </div>
         <!-- <div style="overflow: hidden;">
        <div :class="['es-banner',`${custormItemData.style.borderstyle == '1'?'round':custormItemData.style.borderstyle == '2'?'arc':custormItemData.style.borderstyle == '3'?'square':'arc2'}`]">
          <img :src="getPath(custormItemData.data[0]['thumb']['file_path'])">
       </div>
         </div> -->
         <div style="overflow: hidden;position:relative;top: 0;">
        <div :class="['es-banner',`${custormItemData.style.borderstyle == '1'?'round':custormItemData.style.borderstyle == '2'?'arc':custormItemData.style.borderstyle == '3'?'square':'arc2'}`]">
          <img style="width:372px;height:210px;" :src="getPath(custormItemData.data.length > 0 ? custormItemData.data[0]['thumb']['file_path'] : 'default_picture.png')">
          <!-- <div class="dots" v-bind:style="{'text-align': `${custormItemData.style.align == '1'?'left':custormItemData.style.align == '2'?'center':'right'}`}">
            <span v-for="(item, index) in custormItemData.data" :key="index" v-if="custormItemData.style.borderstyle != '4'" :class="{active:(index == 0)}"></span>
            <span v-if="custormItemData.style.borderstyle == '4'" class="arc2">1/{{custormItemData.data.length}}</span>
          </div> -->
        </div>
      </div>
       </div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicpagetop-show {
  .phone-top {
    width: 100%;
    height: 66px;
    line-height: 90px;
    text-align: center;
  }
  .search{
    width: 170px;
    height: 26px;
    line-height: 26px;
    background: #ffffff;
    border-radius: 17px;
  }
  .title{
    width: 60px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  }
  .classtype{
    height: 40px;
    padding: 10px;
  }
}
</style>
